<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>添加学生</h2>
        <span>
            Id: <input type="number" v-model="newId"> Name: <input type="text" v-model="newName">
            <button @click="add">添加</button> 
            搜索名称关键字：<input type="text" v-model="searchKey">
        </span>
        <table>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Delete</th>
                <th>ModifyName</th>
            </tr>
            <tr v-for="item, index in showStudentList" :keys="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.ctime | processDate }}</td>
                <td><a href="#" @click="del(index)">删除</a></td>
                <td><a href="#"><input type="text"> 修改</a></td>
            </tr>
        </table>
    </div>
    
    <script>
        new Vue({
            el: "#app",
            data: {
                studentList: [
                    {id: 1, name: "姚辉", ctime: new Date()},
                    {id: 3, name: "胡云", ctime: new Date()},
                    {id: 4, name: "张三", ctime: new Date()},
                    {id: 5, name: "李四", ctime: new Date()},
                ],

                // 新增信息字段
                newId: '',
                newName: '',
                searchKey: ''
            },
            computed: {
                showStudentList() {
                    return this.studentList.filter((item) => {
                        return item.name.includes(this.searchKey)
                    })
                } 
            },
            filters: {
                // 处理时间数据
                processDate(date) {
                    var dt = new Date(date)
                    var y = dt.getFullYear()
                    var m = dt.getMonth() + 1
                    var d = dt.getDate()
                    return `${y}-${m}-${d}`
                }
            },
            methods: {
                add() {
                    // 1 判断（id和名称不能为空，且id不能重复）
                    // 2 新增
                    this.studentList.push({
                        id: this.newId,
                        name: this.newName,
                        ctime: new Date()
                    })
                    // 3 提示成功新增
                    window.alert(`Id：${this.newId} 新增成功！`)
                    // 4 置空
                    this.newId = ''
                    this.newName = ''
                },
                del(i) {
                    // 1 询问是否删除
                    if(window.confirm("确认删除吗？")) {
                        // 2 删除
                        this.studentList.splice(i, 1)
                    }
                }
            }
        })
    </script>
</body>
</html>